<template>
  <p>{{ obj.a.b.c.d }}</p>
  <button @click="handleClick">修改d</button>
  <p>{{ obj.age }}</p>
  <button @click="obj.age = 22">修改第一层的 age</button>
</template>

<script>
import { reactive, shallowReactive } from 'vue'
export default {
  setup() {
    // reactive 或 ref 默认都是递归劫持的，一旦进行包裹，对里面所有数据的修改都是响应式的
    /* const obj = reactive({
      age: 18,
      a: {
        b: {
          c: {
            d: 'Hello World',
          },
        },
      },
    }) */
    // 只有第一层是响应式的，性能优化
    const obj = shallowReactive({
      age: 18,
      a: {
        b: {
          c: {
            d: 'Hello World',
          },
        },
      },
    })
    const handleClick = () => {
      obj.a.b.c.d = 'Hello 2022~~'
    }
    return {
      obj,
      handleClick,
    }
  },
}
</script>
